<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="q-index">
    <img :src="log_img_url" alt="search" class="search-icon" @click="logoClick" />
    <input ref="inputRef" @focus="focusFun" @blur="blurFun" type="text">
    <div v-if="isShowOptions" class="q-index-container">
      <div v-for="(item, key) in imgList" :key="key" class="option" @click="optionClick(key)">
        <img :src="item.img_url" :alt="item.name" />
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const { data } = defineProps(['data']);
const emitr = defineEmits(['optionClick'])
const isShowOptions = ref(false)
import useSearchEngine from '@/hooks/index/useSearchEngine';

const { searchEngineKey } = useSearchEngine();

const inputRef = ref<HTMLInputElement | null>(null)

function logoClick() {
  if (inputRef.value) inputRef.value.focus()
}

function optionClick(key: number) {
  emitr('optionClick', key)
}

function focusFun() {
  isShowOptions.value = true
}
function blurFun() {
  setTimeout(() => {
    isShowOptions.value = false
  }, 200)
}

//#region 图片地址相关
import { watch } from 'vue'
const log_img_url = ref<string>('');
watch(searchEngineKey, async (val) => {
  const img = await import(`@/assets/index/${val}.svg`);
  log_img_url.value = img.default
},{immediate: true})

const imgList = ref(data);
for (const key in imgList.value) {
  (async function (){
    const img = await import(`@/assets/index/${key}.svg`);
    imgList.value[key].img_url = img.default
  })()
}
//#endregion
</script>

<style lang="scss" scoped>
.q-index {
  width: 1em;
  height: 1em;
  position: relative;

  .search-icon {
    width: 1em;
    height: 1em;
    cursor: pointer;
  }

  input {
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    background: none;
    opacity: 0;
  }

  .q-index-container {
    padding: .5em;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: .5em;
    box-sizing: border-box;
    top: 100%;
    left: 0;
    width: max-content;
    margin-top: .5em;
    margin-left: -0.5em;

    .option {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: .5em;
      cursor: pointer;

      img {
        width: 1em;
        height: 1em;
        display: flex;
        margin-right: 0.5em;
      }

      &:hover {
        background-color: #cef4ff55;
      }
    }
  }
}
</style>
